<template>
    <w-container style="padding-top:60px;">
        <w-avatar :img="avatarUrl" type="square"/>
        <w-avatar/>
        <hr/>
        <w-button type="default" size="large" icon="close-fill">按钮</w-button>
        <w-button type="primary" size="normal" icon="close-fill">按钮</w-button>
        <w-button type="primary" size="normal" disabled>按钮</w-button>
        <w-button type="success" size="small" icon="close-fill">按钮</w-button>
        <w-button type="info" size="mini" icon="close-fill">按钮</w-button>
        <w-button type="danger" size="mini">按钮</w-button>
        <w-button type="warning" size="mini">按钮</w-button>
        <w-button type="warning" size="large" block>按钮</w-button>
        <w-button type="default" size="large" icon="add-simple" plain>按钮</w-button>
        <w-button type="primary" size="normal" icon="close-fill" plain>按钮</w-button>
        <w-button type="primary" size="normal" disabled plain>按钮</w-button>
        <w-button type="success" size="small" icon="close-fill" plain>按钮</w-button>
        <w-button type="info" size="mini" icon="close-fill" plain>按钮</w-button>
        <w-button type="danger" size="mini" plain>按钮</w-button>
        <w-button type="warning" size="mini" plain>按钮</w-button>
        <hr/>
        <w-checkbox v-model="checkboxValue" value="1" label="选项1" name="name1" disabled color="#f00"/>
        <w-checkbox v-model="checkboxValue" value="2" label="选项2" name="name1"/>
        <w-checkbox v-model="checkboxValue" value="3" label="选项3" name="name1"/>
        <w-checkbox v-model="checkboxValue" value="4" label="选项4" name="name1"/>
        <hr/>
        <w-collapse>
            <w-collapse-title>标题</w-collapse-title>
            <w-collapse-content>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</w-collapse-content>
        </w-collapse>
        <w-collapse>
            <w-collapse-title>标题</w-collapse-title>
            <w-collapse-content>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</w-collapse-content>
        </w-collapse>
        <hr/>
        <w-counter @change="counterChange" number="1" min="0" max="10" step="1"/>
        <w-counter @change="counterChange" number="1" min="0" max="2" step="0.2"/>
        <w-counter @change="counterChange" number="1" step="0.2"/>
        <hr/>
        <w-count-down target-date="2023-01-01"/>
        <w-count-down @change="countDownChange" @finish="countDownFinish" target-date="2022-03-25 20:14"/>
        <w-count-down type="warning" targetDate="2023-03-24" format="DD天HH时MM分SS秒"/>
        <w-count-down type="primary" plain targetDate="2023-03-24" autoStart format="DD天HH小时MM分SS秒"/>
        <hr/>
        <w-datepicker v-model="datepickerValue" @change="datepickerChange"/>
        <hr/>
        <w-divider/>
        <w-divider text="这是分割线"/>
        <w-divider text="这是分割线" border-style="dashed"/>
        <w-divider text="这是分割线" color="#f00"  border-color="#f00" border-style="dotted"/>
        <hr/>
        <w-form-label>form标签</w-form-label>
        <w-form-label>图标</w-form-label>
        <span v-for="(item,index) in ICONS" :key="index">
            <component :is="item"/>
        </span>
        <hr/>
        <w-grid center>
            <w-grid-item col="8"><w-avatar :img="avatarUrl" type="square"/></w-grid-item>
            <w-grid-item col="8"><w-avatar type="square"/></w-grid-item>
            <w-grid-item col="8"><w-avatar/></w-grid-item>
        </w-grid>
        <w-header-bar text="返回" title="页面标题" @click-event="headerBarClick" type="primary"/>
        <w-image/>
        <w-image :src="avatarUrl"/>
        <hr/>
        <w-input v-model="inputValue" placeholder="请输入内容"/>
        <div>{{inputValue}}</div>
        <w-input v-model="inputValue"/>
        <hr/>
        <w-form-label>list列表</w-form-label>
        <w-list :image="picUrl1">
            <w-list-title>标题标题标题</w-list-title>
            <w-list-label>标签内容标签内容标签内容标签内容</w-list-label>
            <w-list-content>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</w-list-content>
        </w-list>
        <w-list :image="picUrl1">
            <w-list-title>标题标题标题</w-list-title>
            <w-list-label>标签内容标签内容标签内容标签内容</w-list-label>
            <w-list-content>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</w-list-content>
        </w-list>
        <w-list direction="vertical" :image="picUrl2">
            <w-list-title>标题标题标题</w-list-title>
            <w-list-label>标签内容标签内容标签内容标签内容</w-list-label>
            <w-list-content>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</w-list-content>
        </w-list>
        <w-list direction="vertical" :image="picUrl2">
            <w-list-title>标题标题标题</w-list-title>
            <w-list-label>标签内容标签内容标签内容标签内容</w-list-label>
            <w-list-content>列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容</w-list-content>
        </w-list>
        <hr/>
        <w-loading/>
        <w-loading color="red" text="加载中..."/>
        <w-loading text="加载中..." text-position="right"/>
        <w-loading icon="loading-line"/>
        <hr/>
        <w-pagination @change="changePage" :totalCount="100" :currentPage="1" :size="10" :visiblePage="5"/>
        <w-pagination @change="changePage" type="danger" :totalCount="100" :currentPage="4" :size="10" :visiblePage="5"/>
        <w-pagination type="success" :totalCount="100" :currentPage="1" :size="10" :visiblePage="3" prevText="prev" nextText="next"/>
        <hr/>
        <w-button @click="showPopup">显示popup</w-button>
        <w-popup v-model:visible="popupVisible" position="bottom">
            <div>内容！</div>
        </w-popup>
        <w-radio v-model="radioValue" value="1" label="选项1" name="name1" disabled color="#f00"/>
        <w-radio v-model="radioValue" value="2" label="选项2" name="name1"/>
        <w-radio v-model="radioValue" value="3" label="选项3" name="name1"/>
        <w-radio v-model="radioValue" value="4" label="选项4" name="name1"/>

        <hr/>
        <w-range icon="voice-on"/>
        <w-range @change="rangeChange" :init="30" color="#f00"/>
        <hr/>
        <w-select @change="selectChange" v-model="selectValue" placeholder="请选择">
            <w-select-option value="1">选项1</w-select-option>
            <w-select-option value="2">选项2</w-select-option>
            <w-select-option value="3">选项3</w-select-option>
            <w-select-option value="4">选项4</w-select-option>
            <w-select-option value="5">选项5</w-select-option>
            <w-select-option value="6">选项6</w-select-option>
        </w-select>
        <hr/>
        <w-form-label>开关</w-form-label>
        <w-switch size="large" @change="switchChange" open/>
        <w-switch color="red"/>
        <w-switch size="small" color="green"/>
        <w-switch size="mini" color="skyblue"/>
        <w-form-label>文本框textarea</w-form-label>
        <w-textarea size="large" v-model="inputValue"/>
        <w-spacing></w-spacing>
        <w-textarea v-model="inputValue"/>
        <w-spacing height="50px"></w-spacing>
        <w-textarea v-model="inputValue" size="small" placeholder="请输入内容"/>
        <w-textarea v-model="inputValue" size="mini"/>
        <w-form-label>文件上传</w-form-label>
        <w-grid>
            <w-grid-item><w-uploader action="#" @change="uploadChange" @start="uploadStart" @success="uploadSuccess" @error="uploadError"/></w-grid-item>
            <w-grid-item><w-uploader limit="0.01"/></w-grid-item>
            <w-grid-item><w-uploader status='upload'/></w-grid-item>
            <w-grid-item><w-uploader status='error'/></w-grid-item>
        </w-grid>
    </w-container>
</template>

<script lang="ts">
import {defineComponent,ref,Ref} from 'vue';
import {WView} from './wave/packages';
import {WMessage} from './wave/packages';
import avatarUrl from './assets/avatar.jpg';
import picUrl1 from './assets/pic1.jpg';
import picUrl2 from './assets/pic3.jpg';

const ICONS=require('./wave/icons') as any;
export default defineComponent({
    name:'App',
    setup(){
        let checkboxValue:Ref=ref(['2']);
        let radioValue:Ref=ref('3');
        function countDownChange(date:{}){
            console.log(date)
        }
        function countDownFinish(date:string){
            console.log(date)
        }
        function counterChange(num:number){
            console.log(num)
        }
        function headerBarClick(){
            alert('back')
        }

        // setTimeout(function(){
        //     WView.showImage('');
        //     setTimeout(function(){
        //         WView.close()
        //     },2000);
        // },2000);
        // setTimeout(()=>{
        //     WMessage.loading();
        //     setTimeout(()=>{WMessage.close()},2000)
        // },2000);
        // setTimeout(()=>{
        //     WMessage.notice({text:'手动发了是的'});
        // },1000);
        // setTimeout(()=>{
        //     WMessage.notice({text:'手动发了是的',type:'success'});
        // },1000);
        // setTimeout(()=>{
        //     WMessage.notice({text:'手动发了是的',type:'error'});
        // },1000);
        // setTimeout(()=>{
        //     WMessage.alert({text:'手动发了是的',ensure:()=>{alert(222)}});
        // },1000);
        // setTimeout(()=>{
        //     WMessage.warning({text:'手动发了是的',ensure:()=>{alert(222)}});
        // },1000);
        // setTimeout(()=>{
        //     WMessage.confirm({text:'手动发了是的',ensure:()=>{alert(33)},cancel:()=>{alert(66)}});
        // },1000);

        let inputValue=ref('');
        let datepickerValue=ref('2022-03-01');
        function datepickerChange(value:string){
            console.log(value);
            console.log(datepickerValue.value)
        }

        function changePage(page:number,type:string){
            console.log(page,type);
        }
        let popupVisible=ref(false);
        function showPopup(){
            popupVisible.value=true;
        }

        function rangeChange(value:number){
            console.log(value)
        }
        let selectValue=ref('2');
        function selectChange(value:string){
            console.log(value)
            console.log(selectValue.value)
        }
        function switchChange(value:boolean){
            console.log(value)
        }

        function uploadChange(value:any){
            console.log('uploadChange',value);
        }
        function uploadStart(value:any){
            console.log('uploadStart',value);
        }
        function uploadSuccess(value:any){
            console.log('uploadSuccess',value);
        }
        function uploadError(value:any){
            console.log('uploadError',value);
        }

        return {
            checkboxValue,
            radioValue,
            countDownChange,
            countDownFinish,
            counterChange,
            headerBarClick,
            inputValue,
            datepickerValue,
            datepickerChange,
            changePage,
            showPopup,
            popupVisible,
            rangeChange,
            selectChange,
            selectValue,
            switchChange,
            uploadChange,
            uploadStart,
            uploadSuccess,
            uploadError,
            avatarUrl,
            picUrl1,
            picUrl2,
            ICONS
        }
    }
});
</script>